<template>
	<view class="work-content">
		<view class="tab">
			<view :class="activeId == item.id?'tab-list tabActive':'tab-list'" @click="tabClick(item)"
				v-for="item in CircleData">{{item.title}}</view>
		</view>
		<view class="search">
			<uni-easyinput suffixIcon="search" placeholder="请输入圈子名称" v-model="name"
				@iconClick="getThemeData"></uni-easyinput>
		</view>
		<view class="content-list" @click="handleClick(item)" v-for="item in dataList">
			<view class="head-bar">
				<u--image :showLoading="true" :src="imgUrl+item.accessory" width="80px" height="80px"></u--image>
				<view class="right">
					<view class="title">{{item.name}}</view>
					<view class="text">{{item.title}}</view>
				</view>
			</view>
			<view class="content-bar">
				<view class="bar-info">{{item.userName}}</view>
				<view class="bar-info">{{item.create_time}}</view>
			</view>
			<view class="footbar">
				<view class="card-actions-item">
					<uni-icons type="hand-up" size="20" color="#999"></uni-icons>
					<text class="card-actions-item-text">{{item.like_num}}</text>
				</view>
				<view class="card-actions-item">
					<uni-icons type="star" size="20" color="#999"></uni-icons>
					<text class="card-actions-item-text">{{item.collect_num}}</text>
				</view>
				<view class="card-actions-item">
					<uni-icons type="chat" size="20" color="#999"></uni-icons>
					<text class="card-actions-item-text">{{item.review_num}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	import {
		getThemeList,
		getCircle
	} from '@/api/work'
	export default {
		data() {
			return {
				imgUrl: config.imgUrl,
				activeId: "",
				name: "",
				dataList: [],
				CircleData: []
			}
		},
		created() {
			getCircle({
				deviceId: this.$store.state.user.deviceId
			}).then(res => {
				this.activeId = res.list[0]["id"];
				this.CircleData = res.list;
				this.getThemeData()
			})
		},
		methods: {
			tabClick(item) {
				this.activeId = item.id;
				this.getThemeData()
			},
			handleClick(item) {
				this.$tab.navigateTo(`/pages/work/topicdetails?themeId=` + item.id)
			},
			getThemeData() {
				getThemeList({
					name: this.name,
					circleId: this.activeId,
					deviceId: this.$store.state.user.deviceId
				}).then(res => {
					this.dataList = res.records;
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #ddd;
	}

	.work-content {
		.tab {
			width: 100vw;
			overflow-x: scroll;
			display: flex;
			background: #fff;
			align-items: center;
			border-bottom: 1px solid #eee;

			.tab-list {
				padding: 10px;
			}

			.tabActive {
				border-bottom: 1px solid #3c96f3;
				color: #3c96f3;
			}
		}

		.search {
			background: #fff;
			padding: 10px 15px;
		}

		.content-list {
			background: #fff;
			margin: 10px;

			.head-bar {
				display: flex;
				align-items: center;
				padding: 10px;

				.right {
					margin-left: 15px;

					.title {
						font-size: 20px;
						color: #666;
					}

					.text {
						font-size: 14px;
						color: #999;
					}
				}
			}

			.content-bar {
				display: flex;
				justify-content: space-between;
				border-top: 1px solid #eee;
				padding: 10px;
			}

			.footbar {
				border-top: 1px solid #eee;
				padding: 10px;
				display: flex;
				justify-content: space-between;

				.card-actions-item {
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>